$(() => {
    // 发送请求获取数据
    myAjax('get', '/admin/data/info', {}, (res) => {
        // console.log(res);
        let htmlStr = template('info', res)
        $('.spannel_list').html(htmlStr)
    })

    // 折线图
    function chartLine(arr1, arr2) {
        // 放图标的容器
        var chartDom = document.getElementById('curve_show');
        // 初始化
        var myChart = echarts.init(chartDom);
        var option = {
            // 标题
            title: {
                left: 'center',
                text: '文章日新增趋势'
            },
            // 折线图上显示数字
            label: {
                show: true,
                position: 'top'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: [
                {
                    left: '5%',
                    right: '5%',
                    bottom: 70
                }
            ],
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#2980B9' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#6DD5FA' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            ],
            // x轴
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: arr1
            },
            // y轴
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: arr2,
                    type: 'line',
                    // 平滑
                    smooth: true,
                    areaStyle: {}
                }
            ]
        };

        option && myChart.setOption(option);
    }
    chartLine()

    // 发送请求获取折线图的数据
    function getLineData() {
        myAjax('get', '/admin/data/article', {}, (res) => {
            // console.log(res);
            // 处理后台返回的数据,处理数据的格式
            // let arr1 = []
            // let arr2 = []
            // //遍历数组
            // res.date.forEach(function (item) {
            //     arr1.push(item.date)
            //     arr2.push(item.count)
            // })
            let arr1 = res.date.map((item) => item.date)
            let arr2 = res.date.map((item) => item.count)
            // console.log(arr1, arr2);
            // 先拿到数据，再渲染图表，并传入处理后的数据
            chartLine(arr1, arr2)
        })
    }
    getLineData()


    // 饼图
    function chartPie(arr) {
        var chartDom = document.getElementById('pie_show');
        var myChart = echarts.init(chartDom);
        var option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '60%'],
                    avoidLabelOverlap: true,
                    // label: {
                    //     show: false,
                    //     position: 'center',
                    // },
                    labelLine: {
                        show: true
                    },
                    data: arr
                }
            ]
        };

        option && myChart.setOption(option);

    }
    // 发送请求获取饼图的数据
    function getPieData() {
        myAjax('get', '/admin/data/category', {}, (res) => {
            // console.log(res);
            // 处理数据的格式，返回的是数组
            let arr = res.date.map((item) => ({ value: item.articles, name: item.name }))
            // 先获取数据，再渲染图
            chartPie(arr)
        })
    }
    getPieData()

    // 柱状图
    function cahrtBar(arr1, arr2) {
        var chartDom = document.getElementById('column_show');
        var myChart = echarts.init(chartDom);
        var option = {
            color: '#3b8d99',
            xAxis: {
                type: 'category',
                data: arr1
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: arr2,
                    type: 'bar',
                    // 柱条的宽度
                    barWidth: 40
                }
            ]
        };
        option && myChart.setOption(option);
    }
    // 发送请求获取数据
    function getBarData() {
        myAjax('get', '/admin/data/visit', {}, (res) => {
            // console.log(res);
            // 遍历后台返回的数据,返回的是对象
            // 处理对象数据
            let arr1 = Object.keys(res.data)
            let arr2 = Object.values(res.data)
            // let arr1 = []
            // let arr2 = []
            // for (let key in res.data) {
            //     arr1.push(key)
            //     arr2.push(res.data[key])
            // }
            // 拿到数据后再渲染图表
            cahrtBar(arr1, arr2)
        })
    }
    getBarData()
})